<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>附加费</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="widtd=device-widtd, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all"/>
    <link rel="stylesheet" href="../css/main.css" media="all"/>
    <link rel="stylesheet" href="../css/additional.css" media="all"/>
</head>
<body class="childrenBody all">
<div id="all">
    <div class="top" id="additional">
        <div>
            <button type="button" class="layui-btn" @click="adduser(1)"><i class="layui-icon">&#xe608;</i> 添加</button>
            <button type="button" @click="exports" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe621;</i>导出
            </button>
        </div>
        <div class="top_right">
            <!--<div class="layui-input-inline">-->
                <!--<input type="tel" name="phone" lay-verify="required|phone" placeholder="搜索项目序号、员工编号、费用类型、名称、使用人员"-->
                       <!--autocomplete="off" class="layui-input">-->
            <!--</div>-->
            <!--<div>-->
                <!--<button type="button" class="layui-btn layui-btn-normal">搜索</button>-->
            <!--</div>-->
        </div>
    </div>
    <div class="tabs">
        <table class="layui-table" id="additionals">
            <tr class="gray" style="font-weight: bold">
                <td>操作</td>
                <td>序号</td>
                <td>填写日期</td>
                <td>填表人</td>
                <td>费用编号</td>
                <td>名称</td>
                <td>缴费基数</td>
                <td>税率(%)</td>
                <td>金额</td>
                <td>备注</td>
            </tr>
            <tr class="" v-for="item in arr">
                <td>
                    <span class="operation" @click="adduser(2, item.id)">编辑</span>
                    <span @click="del(item.id)" class="operation">删除</span>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.fj_number}}</td>
                <td>{{item.fj_name}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.tax_fee}}</td>
                <td>{{item.money}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr class="gray">
                <td colspan="4"></td>
                <td colspan="4"><b>附加税合计</b></td>
                <td>{{s1}}</td>
                <td></td>
            </tr>
        </table>
    </div>
    <div class="x-body" id="addopen" style="display: none;padding-top: 10px">
        <form class="layui-form">
            <div class="layui-form-item">
                <label for="fj_name" class="layui-form-label">
                    <span class="x-red">*</span>姓名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="fj_name" v-model="fj_name" name="fj_name"
                           autocomplete="off" lay-verify="required" class="layui-input">
                </div>
                <label for="fj_number" class="layui-form-label">
                    <span class="x-red">*</span>费用编号
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="fj_number" v-model="fj_number" name="fj_number"
                           autocomplete="off" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="unit" class="layui-form-label">
                    <span class="x-red">*</span>缴费基数
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="unit" v-model="unit" onkeyup="value=value.replace(/[^\d.]/g,'')" name="unit"
                           autocomplete="off" lay-verify="required" class="layui-input">
                </div>
                <label for="tax_fee" class="layui-form-label">
                    <span class="x-red">*</span>税率(%)
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="tax_fee" v-model="tax_fee" onkeyup="value=value.replace(/[^\d.]/g,'')" name="tax_fee"
                           autocomplete="off" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="total" class="layui-form-label">
                    <span class="x-red">*</span>金额
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="total" v-model="total" disabled name="total"
                           autocomplete="off" lay-verify="required" class="layui-input">
                </div>
                <label for="note" class="layui-form-label">
                    <span class="x-red">*</span>备注
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="note" v-model="note" name="note"
                           autocomplete="off" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="tcreatetime" class="layui-form-label">
                    <span class="x-red">*</span>日期
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="tcreatetime" lay-verify="date" placeholder=""
                           autocomplete="off" placeholder="选择日期" class="layui-input" id="tcreatetime">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>
                <button class="layui-btn" type="button" lay-filter="add" lay-submit="">
                    保存
                </button>
            </div>
        </form>
    </div>
</div>
<div id="demo8"></div>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../layui/layui.all.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
<script type="text/javascript" src="../js/excel.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
</body>
</html>
<script>
    var vm = new Vue({
        el: '#all',
        data: {
            page: 1,
            project_id: sessionStorage.getItem('projectopt'),
            arr: [],
            count: 0, //总条数
            s1: 0, //单位基数 年薪
            fj_name: '', //名称
            fj_number: '', //编号
            unit: 0, //缴费基数
            tax_fee: 0, //税率
            total: 0, //金额
            note: '', //备注
            stus: '', //新增修改标识
            tid: '', //当前编辑id
            permissions:''//权限标识
        },
        created: function () {
            this.initData();
        },
        //加载完后执行
        mounted: function(){
            layui.use(['laypage', 'layer', 'element', 'form'], function () {
                var laypage = layui.laypage,
                    layer = layui.layer,
                    form = layui.form,
                    element = layui.element,
                    laydate = layui.laydate,
                    $ = layui.jquery;
                laydate.render({
                    elem: '#tcreatetime'
                })
                //自定义排版
                laypage.render({
                    elem: 'demo8'
                    , count: 1000
                    , layout: ['limit', 'prev', 'page', 'next']
                });
                form.on('submit(add)', function (data) {
                    var load = layer.load(2, {
                        shade: [0.6, '#fff'] //0.1透明度的白色背景
                    })
                    var obj = {
                        project_id: vm.project_id,
                        fj_number: data.field.fj_number,
                        fj_name: data.field.fj_name,
                        unit: data.field.unit,
                        note: data.field.note,
                        tax_fee: data.field.tax_fee / 100,
                        createtime: data.field.tcreatetime
                    }
                    var url = '';
                    if (vm.stus == 1) {
                        url = 'api/Addition/fujiamoneyadd';
                    } else {
                        url = 'api/Addition/fujiamoneyeditdo';
                        obj.id = vm.tid;
                    }
                    $.when(PUATTRBUTE.REQUESTFUN(url, obj).done(function (res) {
                            layui.layer.close(load)
                            if (res.code == 1) {
                                layui.layer.msg(res.msg, {time: 1000, icon: 1});
                                vm.initData();
                                vm.unit = 0;
                                vm.note = '';
                                vm.fj_number = '';
                                vm.fj_name = '';
                                vm.tax_fee = 0;
                                layer.closeAll();
                                layui.form.render();
                            } else {
                                layui.layer.msg(res.msg, {time: 1000, icon: 2})
                            }
                        })
                    )
                })
            });
        },
        watch: {
            unit: function () {
                if (this.unit != 0 && this.tax_fee != 0) {
                    this.total = PUATTRBUTE.CHANGETWO(this.unit * (this.tax_fee / 100));
                }
            },
            tax_fee: function () {
                if (this.tax_fee != 0 && this.unit != 0) {
                    this.total = PUATTRBUTE.CHANGETWO(this.unit * (this.tax_fee / 100));
                }
            }
        },
        methods: {
            //初始化数据
            initData: function () {
                var obj = {
                    page: this.page,
                    limit: 12,
                    project_id: this.project_id
                }
                var load = layer.load(2, {
                    shade: [0.6, '#fff'] //0.1透明度的白色背景
                })
                $.when(PUATTRBUTE.REQUESTFUN('api/Addition/fujiamoneyindex', obj).done(function (res) {
                        layer.close(load)
                        if (res.code == 1) {
                            var data = res.data.part;
                            var t1 = 0;
                            for (item in data) {
                                t1 += PUATTRBUTE.CHANGETWO(data[item].money);
                                data[item].tax_fee = data[item].tax_fee * 100;
                            }
                            vm.arr = res.data.part;
                            vm.s1 = t1;
                            if (vm.page == 1) {
                                vm.initpage(res.data.count);
                            }
                        } else {
                            if(res.msg == "暂无权限"){
                                vm.permissions= 1 ;
                            }
                            vm.initpage(0);
                            layer.msg(res.msg, {time: 1000, icon: 2})
                        }
                    })
                )
            },
            initpage: function (count) {
                //自定义排版
                layui.laypage.render({
                    elem: 'demo8'
                    , count: count
                    , limit: 12
                    , jump: function (obj, first) {
                        if (!first) {
                            vm.page = obj.curr;
                            vm.initData();
                        }
                    }
                });
            },
            //打开面板
            adduser: function (idx, tid) {
                if(this.permissions == 1){
                    layer.alert("抱歉，您没有此权限！");
                }else {
                    var title = ''
                    this.stus = idx;
                    this.tid = tid;
                    if (idx == 1) {
                        title = '新增人员工资信息';
                        vm.unit = 0;
                        vm.note = '';
                        vm.fj_name = ''; //名称
                        vm.fj_number = ''; //编号
                        vm.tax_fee = 0;//税率
                        vm.total = 0;
                        $("#tcreatetime").val(PUATTRBUTE.NEWDATE());
                        layui.form.render();
                    } else {
                        //编辑初始化数据
                        var obj = {
                            id: tid,
                            project_id: vm.project_id
                        }
                        title = '编辑人员工资信息';
                        $.when(PUATTRBUTE.REQUESTFUN('api/Addition/fujiamoneyedit', obj).done(function (res) {
                                if (res.code == 1) {
                                    layui.form.render('select');// 再次渲染select
                                    vm.unit = res.data.unit; //基数
                                    vm.total = res.data.money; //金额
                                    vm.fj_name = res.data.fj_name;
                                    vm.fj_number = res.data.fj_number;
                                    vm.tax_fee = res.data.tax_fee * 100;
                                    vm.note = res.data.note;//备注
                                    $('#tcreatetime').val(vm.formatDate(res.data.createtime));
                                } else {
                                    layer.msg(res.msg, {time: 1000, icon: 2})
                                }
                            })
                        )
                    }
                    layui.form.render('select');// 再次渲染select
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['650px', '500px'], //宽高
                        title: title,
                        content: $("#addopen")
                    });
                }
            },
            formatDate: function (crtime) {
                var date = new Date(parseInt(crtime) * 1000) // 时间戳为10位需乘1000，为13位则不用
                var Y = date.getFullYear() // 年
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) // 月
                var D = date.getDate() < 10 ? '0' + date.getDate() + '' : date.getDate() + '' // 日
                return Y + '-' + M + '-' + D // yyyy-mm-dd
            },
            //导出
            exports: function () {
                if(this.permissions == 1){
                    layer.alert("抱歉，您没有此权限！");
                }else {
                    var tableHtml = $('#additionals');
                    $(tableHtml).css({
                        'border':'1px solid #d5d5d2',
                        'text-align':'center',
                        'border-collapse':'collapse',
                    });
                    $(tableHtml).find('tr td').css({
                        'text-align':'center',
                        'border':'1px solid #d5d5d2',
                        'line-height':'30px',
                        'padding':'0px 10px',
                        'min-width':'100px'
                    });
                    var html = "<html><head><meta charset='utf-8' /></head><body>" + tableHtml[0].outerHTML + "</body></html>";
// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
                    var blob = new Blob([html], { type: "application/vnd.ms-excel" });
                    var urlA = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
                    $('.table-btn-group').append(urlA);
                    urlA.href = URL.createObjectURL(blob);
// 设置文件名，目前只有Chrome和FireFox支持此属性
                    urlA.download = "附加费.xls";
                    urlA.click();
                }
            },
            //删除
            del: function (e) {
                var obj = {
                    id: e,
                    project_id: vm.project_id
                }
                layer.confirm('确定删除吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    var load = layer.load(2, {
                        shade: [0.6, '#fff'] //0.1透明度的白色背景
                    })
                    $.when(PUATTRBUTE.REQUESTFUN('api/Addition/fujiamoneydel', obj).done(function (res) {
                            layer.close(load);
                            if (res.code == 1) {
                                layer.msg(res.msg, {time: 1000, icon: 1})
                                vm.initData();
                            } else {
                                layer.msg(res.msg, {time: 1000, icon: 2})
                            }
                        })
                    )
                }, function () {
                    layer.closeAll();
                });
            }
        }
     })
</script>

